<template>
  <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" :collapse="isCollapse" router>
    <el-sub-menu index="1">
      <template #title>
        <img src="@/assets/images/common/menu_icon1.svg" alt="" />
        <span>展示中心</span>
      </template>
      <el-menu-item @click="openNewWindow('/exhibition/dataScreen/index')">
        <template #title>
          <span>数据大屏</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/exhibition/siteOverview/index">
        <template #title>
          <span>站点概览</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <img src="@/assets/images/common/menu_icon2.svg" alt="" />
        <span>监控中心</span>
      </template>
      <el-menu-item index="/monitor/realTimeOperation/index">
        <template #title>
          <span>实时运行</span>
        </template>
      </el-menu-item>
      <el-menu-item @click="openNewWindow('/monitor/singleStationMonitoring/index')">
        <template #title>
          <span>单站监控</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/monitor/centralizedControlManagement/index">
        <template #title>
          <span>集控管理</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <img src="@/assets/images/common/menu_icon3.svg" alt="" />
        <span>报警中心</span>
      </template>
      <el-menu-item index="/alarm/realTimeAlarm/index">
        <template #title>
          <span>实时报警</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/alarm/alarmStatistics/index">
        <template #title>
          <span>报警统计</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <img src="@/assets/images/common/menu_icon4.svg" alt="" />
        <span>分析中心</span>
      </template>
      <el-menu-item index="/analysis/curveReport">
        <template #title>
          <span>曲线报表</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/analysis/batteryAnalysis/index">
        <template #title>
          <span>电池分析</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/analysis/laggingBatteryReport/index">
        <template #title>
          <span>落后电池报表</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>
        <img src="@/assets/images/common/menu_icon5.svg" alt="" />
        <span>管理中心</span>
      </template>
      <el-menu-item index="/management/systemSettings/index">
        <template #title>
          <span>系统设置</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/management/strategyManagement/index">
        <template #title>
          <span>策略管理</span>
        </template>
      </el-menu-item>
      <el-menu-item index="/management/personnelManagement/index">
        <template #title>
          <span>人员管理</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/operation/index">
      <template #title>
        <img src="@/assets/images/common/menu_icon6.svg" alt="" />
        <span>运维中心</span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import router from '@/router';
import { ref, watch } from 'vue'
const isCollapse = ref(false)
const defaultActive = ref(router.currentRoute.value.path)
const openNewWindow = (path: string) => {

  const routeUrl = router.resolve({ path: path });
  window.open(routeUrl.href, '_blank');
}

// 修改watch逻辑，增加对子路由的处理
watch(
  () => router.currentRoute.value.path,
  (newPath) => {
    // 处理曲线报表特殊情况
    if (newPath.startsWith('/analysis/curveReport/')) {
      defaultActive.value = '/analysis/curveReport'
    } else {
      defaultActive.value = newPath
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.el-menu {
  height: 100%;
  background: #011532;
  padding: 24px 12px 12px;
  overflow-y: scroll;
  border: none;

  :deep(.el-sub-menu) {
    .el-sub-menu__title {
      color: #fff;
      font-size: 16px;
      height: 40px;

      img {
        width: 24px;
        margin-right: 8px;
      }

      .el-icon {
        font-size: 20px;
      }
    }

    .el-sub-menu__title:hover {
      background: none;
    }
  }

  .el-menu-item {
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    height: 40px;
  }

  .el-menu-item:hover {
    background: #046AF9;
  }
  .el-menu-item{
    img{
      width: 24px;
      margin-right: 8px;
    }
  }
  .el-menu-item.is-active {
    background: #046AF9;
  }

  :deep(.el-menu) {
    background: #011532;

    .el-menu-item {
      border-radius: 4px;
      font-size: 16px;
      height: 40px;
      padding-left: 64px;
    }

    .el-menu-item:hover {
      background: #046AF9;
    }

    .el-menu-item.is-active {
      background: #046AF9;
    }
  }


}
</style>